<template>
  <div>
    <!-- Teleport 是一个内置组件，使我们可以将一个组件的一部分模板传送到该组件的DOM层次结构之外的DOM节点中 -->
    <button @click="open = true">Open Modal</button>

    <!-- 为 Teleport 指定的目标 to 期望接收一个 css 选择器字符串或者一个真实的DOM节点 -->
    <Teleport to="body">
      <Transition name="modal">
        <div v-if="open" class="modal">
          <div class="modal-container">
            <p>Hello from the modal!</p>
            <button @click="open = false">Close Modal</button>
          </div>
        </div>
      </Transition>
    </Teleport>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const open = ref(false)
</script>

<style scoped>
.modal {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  transition: opacity 0.3s ease;
  background-color: rgba(0, 0, 0, 0.4);
}
.modal-container {
  position: fixed;
  z-index: 999;
  top: 20%;
  left: 50%;
  width: 300px;
  margin-left: -150px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 3px 12px #efefef, 0 1px 7px #efefef;
  transition: all 0.3s ease;
}
.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}
.modal-enter-from .modal-container,
.modal-leave-to .modal-container {
  transform: scale(1.1);
}
</style>